<!--
 * @Author: wangkg wangkegui@longfor.com
 * @Date: 2024-05-08 17:31:57
 * @Description: 
-->
<template>
  <el-icon v-if="icon">
    <Icon :iconClass="icon" :size="18" :class="`${prefixCls}-wrapper__icon`" prefix="" />
  </el-icon>
  <span>{{ title }}</span>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { LcSvgIcon as Icon } from '@/components/icon';
import { getGlobalCls } from '@/utils/index';
import { contentProps } from '../props';

defineOptions({ name: 'MenuItemContent' });

const props = defineProps(contentProps);
const { prefixCls } = getGlobalCls('basic-menu-item-content');

const title = computed(() => props.item?.meta?.title || props.item?.name);
const icon = computed(() => (props.item?.img ? undefined : props.item?.icon));
</script>
<style lang="scss">
  $basic-menu-item-content-prefix-cls: #{config.$namespace}-basic-menu-item-content-wrapper__icon;
  .#{$basic-menu-item-content-prefix-cls} {
    margin-right: 4px;
  }
</style>
